সিএসএস ফ্লেক্সবক্স মাল্টি-লাইন অপটিমাইজেশন: জটিল ফ্লেক্স লেআউট কর্মক্ষমতা

সিএসএস ফ্লেক্সবক্স একটি শক্তিশালী লেআউট সরঞ্জাম যা ওয়েব ডেভেলপমেন্টে বিপ্লব ঘটিয়েছে। এটি ডেভেলপারদের সহজে নমনীয় এবং প্রতিক্রিয়াশীল লেআউট তৈরি করতে দেয়। যাইহোক, যখন মাল্টি-লাইন ফ্লেক্স কন্টেইনার এবং জটিল ডিজাইন নিয়ে কাজ করা হয়, তখন কর্মক্ষমতা একটি উদ্বেগের বিষয় হয়ে দাঁড়াতে পারে। এই নিবন্ধটি বিভিন্ন ব্রাউজার এবং ডিভাইস জুড়ে সর্বোত্তম কর্মক্ষমতা অর্জনের জন্য মাল্টি-লাইন ফ্লেক্সবক্স লেআউট অপ্টিমাইজ করার জটিলতাগুলি অন্বেষণ করে।

মাল্টি-লাইন ফ্লেক্সবক্স বোঝা

অপটিমাইজেশন কৌশলগুলিতে ডুব দেওয়ার আগে, ফ্লেক্সবক্স কীভাবে মাল্টি-লাইন পরিস্থিতিগুলি পরিচালনা করে তা বোঝা অত্যন্ত গুরুত্বপূর্ণ। ডিফল্টরূপে, একটি ফ্লেক্স কন্টেইনার একটি লাইনে সমস্ত আইটেম লেআউট করার চেষ্টা করে। যখন ফ্লেক্স আইটেমগুলির সম্মিলিত প্রস্থ (অথবা উচ্চতা, flex-direction এর উপর নির্ভর করে) কন্টেইনারের উপলব্ধ স্থান অতিক্রম করে, তখন আইটেমগুলি হয় উপচে পড়বে অথবা একাধিক লাইনে মোড়ানো হবে, যা flex-wrap বৈশিষ্ট্য দ্বারা নিয়ন্ত্রিত হয়।

flex-wrap বৈশিষ্ট্যটি তিনটি মান নিতে পারে:

• nowrap (ডিফল্ট): সমস্ত ফ্লেক্স আইটেম একটি লাইনে বাধ্য করা হয়। আইটেমগুলি খুব বেশি প্রশস্ত হলে এটি উপচে পড়তে পারে।
• wrap: প্রয়োজনে ফ্লেক্স আইটেমগুলি একাধিক লাইনে মোড়ানো হয়। মোড়ানোর দিকটি flex-direction বৈশিষ্ট্য দ্বারা নির্ধারিত হয়।
• wrap-reverse: ফ্লেক্স আইটেমগুলি বিপরীত দিকে একাধিক লাইনে মোড়ানো হয়।

মাল্টি-লাইন ফ্লেক্সবক্স লেআউটগুলি বিভিন্ন স্ক্রীন আকার এবং সামগ্রীর দৈর্ঘ্যের সাথে খাপ খাইয়ে নিতে পারে এমন প্রতিক্রিয়াশীল ডিজাইন তৈরি করার জন্য প্রয়োজনীয়। তবে, এগুলি সাবধানে প্রয়োগ না করা হলে কর্মক্ষমতা চ্যালেঞ্জ তৈরি করতে পারে।

মাল্টি-লাইন ফ্লেক্সবক্সের সাথে কর্মক্ষমতা বিবেচনা

জটিল মাল্টি-লাইন ফ্লেক্সবক্স লেআউট রেন্ডার করা ব্রাউজারগুলির জন্য কম্পিউটেশনালি ব্যয়বহুল হতে পারে। বেশ কয়েকটি কারণ এতে অবদান রাখে:

• রিফ্লো এবং রিপেইন্ট: যখনই কোনও ফ্লেক্স কন্টেইনারের বিষয়বস্তু পরিবর্তিত হয়, বা ব্রাউজার উইন্ডোর আকার পরিবর্তন করা হয়, তখন ব্রাউজারকে লেআউট (রিফ্লো) পুনরায় গণনা করতে এবং প্রভাবিত উপাদানগুলি (রিপেইন্ট) পুনরায় আঁকতে হয়। মাল্টি-লাইন লেআউটগুলি, বিশেষত অনেকগুলি আইটেমযুক্ত, আরও ঘন ঘন এবং ব্যয়বহুল রিফ্লো এবং রিপেইন্ট ট্রিগার করতে পারে।
• লেআউটের জটিলতা: নেস্টেড ফ্লেক্স কন্টেইনার এবং জটিল সারিবদ্ধকরণের প্রয়োজনীয়তা লেআউট গণনার জটিলতা বাড়ায়। ব্রাউজারকে যত বেশি গণনা করতে হবে, রেন্ডারিং প্রক্রিয়া তত ধীর হয়ে যাবে।
• ব্রাউজারের পার্থক্য: বিভিন্ন ব্রাউজার ফ্লেক্সবক্সকে সামান্য ভিন্নভাবে প্রয়োগ করতে পারে, যার ফলে কর্মক্ষমতা ভিন্ন হতে পারে। একটি ব্রাউজারে যা ভালোভাবে কাজ করে তা অন্যটিতে ততটা দক্ষ নাও হতে পারে।

মাল্টি-লাইন ফ্লেক্সবক্সের জন্য অপ্টিমাইজেশন কৌশল

আরও ভাল পারফরম্যান্সের জন্য মাল্টি-লাইন ফ্লেক্সবক্স লেআউটগুলি অপ্টিমাইজ করার জন্য এখানে কয়েকটি কৌশল রয়েছে:

1. রিফ্লো এবং রিপেইন্ট কমানো

অপ্টিমাইজেশনের প্রাথমিক লক্ষ্য হল রিফ্লো এবং রিপেইন্টের সংখ্যা হ্রাস করা। এখানে কিভাবে:

• বাধ্যতামূলক সিঙ্ক্রোনাস লেআউটগুলি এড়িয়ে চলুন: বাধ্যতামূলক সিঙ্ক্রোনাস লেআউটগুলি তখন ঘটে যখন আপনি লেআউটকে প্রভাবিত করে এমন পরিবর্তন করার পরপরই লেআউট বৈশিষ্ট্যগুলি (যেমন, offsetWidth, offsetHeight) পড়েন। এটি ব্রাউজারকে প্রস্তুত হওয়ার আগেই একটি লেআউট গণনা করতে বাধ্য করে, যার ফলে কর্মক্ষমতা বাধাগ্রস্থ হয়। পরিবর্তে, আপনার স্ক্রিপ্টের শুরুতে একবার লেআউট বৈশিষ্ট্যগুলি পড়ুন এবং মানগুলি ক্যাশে করুন।
• ব্যাচ ডিওএম আপডেট: একবারে একটি করে করার পরিবর্তে একসাথে ডিওএম ম্যানিপুলেশনগুলিকে গোষ্ঠীবদ্ধ করুন। এটি ব্রাউজারকে লেআউট প্রক্রিয়া অপ্টিমাইজ করতে দেয়। ব্যাচ আপডেটের জন্য ডকুমেন্ট ফ্র্যাগমেন্ট বা অফ-স্ক্রিন ডিওএম ম্যানিপুলেশনের মতো কৌশলগুলি ব্যবহার করুন।
• সিএসএস ট্রান্সফর্ম এবং অস্বচ্ছতা ব্যবহার করুন: transform এবং opacity এর মতো সিএসএস বৈশিষ্ট্যগুলির পরিবর্তনগুলি প্রায়শই রিফ্লো ট্রিগার না করেই পরিচালনা করা যেতে পারে। এই বৈশিষ্ট্যগুলি সাধারণত জিপিইউ দ্বারা পরিচালিত হয়, যার ফলে মসৃণ অ্যানিমেশন এবং ট্রানজিশন হয়।

2. ফ্লেক্স আইটেমের আকার এবং বৃদ্ধি অপ্টিমাইজ করুন

flex-grow, flex-shrink, এবং flex-basis বৈশিষ্ট্যগুলি ফ্লেক্স আইটেমগুলির আকার নির্ধারণে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। এই বৈশিষ্ট্যগুলি অপ্টিমাইজ করা কর্মক্ষমতা উল্লেখযোগ্যভাবে উন্নত করতে পারে।

• সমান বিতরণের জন্য flex: 1 ব্যবহার করুন: আপনি যদি চান ফ্লেক্স আইটেমগুলি উপলব্ধ স্থান সমানভাবে ভাগ করে নিক, তাহলে flex: 1 (flex: 1 1 0 এর সংক্ষিপ্ত রূপ) ব্যবহার করুন। flex-grow, flex-shrink, এবং flex-basis আলাদাভাবে সেট করার চেয়ে এটি প্রায়শই বেশি দক্ষ।
• অত্যধিক জটিল flex-basis গণনাগুলি এড়িয়ে চলুন: flex-basis এর মধ্যে জটিল গণনা কর্মক্ষমতা প্রভাবিত করতে পারে। যখনই সম্ভব এই গণনাগুলিকে সরল করুন। জটিল সূত্রগুলির উপর নির্ভর করার পরিবর্তে নির্দিষ্ট মান বা শতাংশ ব্যবহার করার কথা বিবেচনা করুন।
• content-box বনাম border-box বিবেচনা করুন: box-sizing বৈশিষ্ট্যটি ব্রাউজার কীভাবে কোনও উপাদানের আকার গণনা করে তা প্রভাবিত করে। border-box ব্যবহার করা লেআউট গণনাকে সহজ করতে পারে এবং অপ্রত্যাশিত উপচে পড়া সমস্যাগুলি প্রতিরোধ করতে পারে, যা সম্ভাব্যভাবে কর্মক্ষমতা উন্নত করে। প্যাডিং এবং বর্ডারগুলির সাথে কাজ করার সময় এটি বিশেষভাবে সত্য।

3. নেস্টিং এবং জটিলতা হ্রাস করুন

ফ্লেক্স কন্টেইনারগুলির অত্যধিক নেস্টিং লেআউটের জটিলতা বাড়িয়ে তুলতে পারে এবং কর্মক্ষমতাকে নেতিবাচকভাবে প্রভাবিত করতে পারে। যখনই সম্ভব আপনার লেআউট কাঠামোকে সরল করুন।

• ডিওএমকে ফ্ল্যাট করুন: আপনার HTML-এ নেস্টেড উপাদানগুলির সংখ্যা হ্রাস করুন। ব্রাউজারকে যত কম উপাদান রেন্ডার করতে হবে, পৃষ্ঠাটি তত দ্রুত লোড হবে।
• যেখানে উপযুক্ত সেখানে সিএসএস গ্রিড ব্যবহার করুন: কিছু ক্ষেত্রে, সিএসএস গ্রিড ফ্লেক্সবক্সের চেয়ে ভাল পছন্দ হতে পারে, বিশেষ করে জটিল দ্বি-মাত্রিক লেআউটের জন্য। গ্রিড আইটেমগুলির বসানোর উপর আরও বেশি নিয়ন্ত্রণ সরবরাহ করে এবং কখনও কখনও আরও ভাল কর্মক্ষমতা দিতে পারে।
• জটিল উপাদানগুলি রিফ্যাক্টর করুন: বড়, জটিল উপাদানগুলিকে ছোট, আরও পরিচালনাযোগ্য উপাদানগুলিতে ভেঙে দিন। এটি কর্মক্ষমতা এবং রক্ষণাবেক্ষণ উভয়ই উন্নত করতে পারে।

4. ছবি এবং অন্যান্য সম্পদ অপ্টিমাইজ করুন

বড় ছবি এবং অন্যান্য সম্পদ পৃষ্ঠা লোড হওয়ার সময় এবং সামগ্রিক কর্মক্ষমতাকে উল্লেখযোগ্যভাবে প্রভাবিত করতে পারে। ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এই সম্পদগুলি অপ্টিমাইজ করুন।

• ছবিগুলি সংকুচিত করুন: গুণমান হ্রাস না করে আপনার ছবিগুলির ফাইলের আকার কমাতে চিত্র কম্প্রেশন সরঞ্জামগুলি ব্যবহার করুন।
• উপযুক্ত চিত্রের বিন্যাস ব্যবহার করুন: চিত্রের প্রকার এবং এর উদ্দিষ্ট ব্যবহারের উপর ভিত্তি করে উপযুক্ত চিত্রের বিন্যাস (যেমন, JPEG, PNG, WebP) চয়ন করুন। WebP সাধারণত JPEG এবং PNG এর চেয়ে ভাল কম্প্রেশন এবং গুণমান সরবরাহ করে।
• আড়লোভাবে ছবি লোড করুন: ছবিগুলি কেবল তখনই লোড করুন যখন সেগুলি ভিউপোর্টে দৃশ্যমান হয়। এটি প্রাথমিকভাবে পৃষ্ঠা লোড হওয়ার সময়টিকে উল্লেখযোগ্যভাবে হ্রাস করতে পারে।
• সিএসএস স্প্রাইট ব্যবহার করুন: একাধিক ছোট ছবিকে একটি একক চিত্র স্প্রাইটে একত্রিত করুন। এটি HTTP অনুরোধের সংখ্যা হ্রাস করে এবং কর্মক্ষমতা উন্নত করতে পারে।

5. ব্রাউজার-নির্দিষ্ট বিবেচনা

বিভিন্ন ব্রাউজার জুড়ে ফ্লেক্সবক্স বাস্তবায়ন সামান্য ভিন্ন হতে পারে। একাধিক ব্রাউজারে আপনার লেআউটগুলি পরীক্ষা করা এবং প্রয়োজনে ব্রাউজার-নির্দিষ্ট অপ্টিমাইজেশন প্রয়োগ করা গুরুত্বপূর্ণ।

• ভেন্ডর উপসর্গ: যদিও বেশিরভাগ আধুনিক ব্রাউজার ভেন্ডর উপসর্গ ছাড়াই ফ্লেক্সবক্স সমর্থন করে, তবে পুরানো ব্রাউজারগুলির জন্য সেগুলি অন্তর্ভুক্ত করা এখনও একটি ভাল অনুশীলন। প্রয়োজনীয় উপসর্গগুলি স্বয়ংক্রিয়ভাবে যুক্ত করতে একটি অটোপ্রিফিক্সার সরঞ্জাম ব্যবহার করুন।
• ব্রাউজার-নির্দিষ্ট হ্যাক: কিছু ক্ষেত্রে, কর্মক্ষমতা সমস্যা বা রেন্ডারিং অসঙ্গতিগুলি মোকাবেলার জন্য আপনাকে ব্রাউজার-নির্দিষ্ট হ্যাক ব্যবহার করতে হতে পারে। এই হ্যাকগুলি কম ব্যবহার করুন এবং সেগুলি স্পষ্টভাবে নথিভুক্ত করুন।
• পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন: কোনও কর্মক্ষমতা সমস্যা চিহ্নিত করতে এবং সমাধান করতে বিভিন্ন ব্রাউজার এবং ডিভাইসে আপনার ফ্লেক্সবক্স লেআউটগুলি পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন। রেন্ডারিং কর্মক্ষমতা প্রোফাইল করতে এবং বাধাগুলি সনাক্ত করতে ব্রাউজার বিকাশকারী সরঞ্জামগুলি ব্যবহার করুন।

6. জাভাস্ক্রিপ্ট এবং ফ্লেক্সবক্স কর্মক্ষমতা

জাভাস্ক্রিপ্ট ফ্লেক্সবক্স কর্মক্ষমতাকেও প্রভাবিত করতে পারে, বিশেষত যখন গতিশীলভাবে ফ্লেক্স আইটেম যুক্ত করা, সরানো বা পরিবর্তন করা হয়। ফ্লেক্সবক্স লেআউটের সাথে জাভাস্ক্রিপ্ট ইন্টারঅ্যাকশন অপ্টিমাইজ করার জন্য এখানে কিছু টিপস দেওয়া হল:

• ডিওএম ম্যানিপুলেশন কমানো: পূর্বে উল্লিখিত হিসাবে, ডিওএম ম্যানিপুলেশনের সংখ্যা কমিয়ে দিন। কর্মক্ষমতা উন্নত করতে ব্যাচ আপডেট করুন এবং ডকুমেন্ট ফ্র্যাগমেন্টের মতো কৌশলগুলি ব্যবহার করুন।
• দক্ষ নির্বাচক ব্যবহার করুন: ফ্লেক্স আইটেমগুলিকে লক্ষ্য করতে দক্ষ সিএসএস নির্বাচক ব্যবহার করুন। অত্যধিক জটিল নির্বাচকগুলি এড়িয়ে চলুন যা রেন্ডারিং প্রক্রিয়াটিকে ধীর করে দিতে পারে।
• ডিবাউন্স বা থ্রটল ইভেন্ট হ্যান্ডলার: আপনি যদি ফ্লেক্স কন্টেইনারের পরিবর্তনগুলিতে সাড়া দেওয়ার জন্য ইভেন্ট হ্যান্ডলার ব্যবহার করেন (যেমন, আকার পরিবর্তনের ইভেন্ট), ইভেন্ট হ্যান্ডলারগুলিকে খুব ঘন ঘন ফায়ার করা থেকে আটকাতে ডিবাউন্স করুন বা থ্রটল করুন।

উদাহরণ এবং সেরা অনুশীলন

আসুন মাল্টি-লাইন ফ্লেক্সবক্স লেআউট অপ্টিমাইজ করার জন্য কিছু ব্যবহারিক উদাহরণ এবং সেরা অনুশীলন দেখি।

উদাহরণ 1: প্রতিক্রিয়াশীল নেভিগেশন মেনু

একটি প্রতিক্রিয়াশীল নেভিগেশন মেনু বিবেচনা করুন যা ছোট স্ক্রিনে একাধিক লাইনে মোড়ানো হয়। এই লেআউটটি অপ্টিমাইজ করতে, আপনি নিম্নলিখিত কৌশলগুলি ব্যবহার করতে পারেন:

• মেনু আইটেমগুলিকে একাধিক লাইনে মোড়ানোর অনুমতি দিতে flex-wrap: wrap ব্যবহার করুন।
• উপলব্ধ স্থান জুড়ে মেনু আইটেমগুলিকে সমানভাবে বিতরণ করতে flex: 1 ব্যবহার করুন।
• বিভিন্ন স্ক্রীন আকারের জন্য লেআউট সামঞ্জস্য করতে মিডিয়া কোয়েরি ব্যবহার করুন।
• মেনুতে ব্যবহৃত ছবি এবং আইকনগুলি অপ্টিমাইজ করুন।

            
.nav-menu {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around; /* Distribute items evenly */
}

.nav-item {
 flex: 1;
 text-align: center;
 padding: 10px;
}

@media (max-width: 768px) {
 .nav-menu {
 flex-direction: column; /* Stack items vertically on smaller screens */
 }
 .nav-item {
 flex: none; /* Remove flex properties for vertical stacking */
 width: 100%;
 }
}

            

              
                Copy
              
            
          

উদাহরণ 2: পণ্য তালিকা গ্রিড

মাল্টি-লাইন ফ্লেক্সবক্সের জন্য একটি সাধারণ ব্যবহারের ক্ষেত্র হল একটি পণ্য তালিকা গ্রিড তৈরি করা। এই ধরনের লেআউটের কর্মক্ষমতা অপ্টিমাইজ করার উপায় এখানে:

• পণ্য আইটেমগুলিকে একাধিক লাইনে মোড়ানোর অনুমতি দিতে flex-wrap: wrap ব্যবহার করুন।
• প্রতিটি পণ্য আইটেমের জন্য একটি সামঞ্জস্যপূর্ণ flex-basis মান ব্যবহার করুন যাতে সেগুলি সমানভাবে বিতরণ করা হয়।
• পণ্য তালিকাগুলিতে ব্যবহৃত ছবিগুলি অপ্টিমাইজ করুন।
• প্রাথমিকভাবে পৃষ্ঠা লোড হওয়ার সময়টি উন্নত করতে ছবিগুলি আড়লোভাবে লোড করুন।

            
.product-grid {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start; /* Align items to the left */
}

.product-item {
 flex-basis: 200px; /* Adjust as needed */
 margin: 10px;
}

            

              
                Copy
              
            
          

সরঞ্জাম এবং সম্পদ

বেশ কয়েকটি সরঞ্জাম এবং সংস্থান রয়েছে যা আপনাকে আপনার মাল্টি-লাইন ফ্লেক্সবক্স লেআউটগুলি অপ্টিমাইজ করতে সহায়তা করতে পারে:

• ব্রাউজার বিকাশকারী সরঞ্জাম: রেন্ডারিং কর্মক্ষমতা প্রোফাইল করতে এবং বাধাগুলি সনাক্ত করতে ব্রাউজারের বিকাশকারী সরঞ্জামগুলি ব্যবহার করুন। Chrome DevTools-এর "পারফরম্যান্স" ট্যাব এবং Firefox Developer Tools-এর "প্রোফাইলার" ট্যাব লেআউট কর্মক্ষমতা বিশ্লেষণের জন্য অমূল্য।
• লাইটহাউস: Google Lighthouse হল একটি সরঞ্জাম যা কর্মক্ষমতা, অ্যাক্সেসযোগ্যতা এবং অন্যান্য মেট্রিকের জন্য ওয়েব পৃষ্ঠাগুলি নিরীক্ষণ করে। এটি আপনার ফ্লেক্সবক্স লেআউটে সম্ভাব্য কর্মক্ষমতা সমস্যাগুলির অন্তর্দৃষ্টি সরবরাহ করতে পারে।
• WebPageTest: WebPageTest হল একটি সরঞ্জাম যা আপনাকে বিভিন্ন স্থান এবং ব্রাউজার থেকে আপনার ওয়েবসাইটের কর্মক্ষমতা পরীক্ষা করতে দেয়। এটি আপনাকে কর্মক্ষমতা বাধা সনাক্ত করতে এবং বিভিন্ন ব্যবহারকারীর জন্য আপনার ওয়েবসাইট অপ্টিমাইজ করতে সহায়তা করতে পারে।
• অটোপ্রিফিক্সার: একটি অটোপ্রিফিক্সার সরঞ্জাম স্বয়ংক্রিয়ভাবে আপনার সিএসএস-এ ভেন্ডর উপসর্গ যুক্ত করে, এটি নিশ্চিত করে যে আপনার ফ্লেক্সবক্স লেআউটগুলি পুরানো ব্রাউজারগুলিতে সঠিকভাবে কাজ করে।

উপসংহার

কার্যকরী এবং প্রতিক্রিয়াশীল ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য মাল্টি-লাইন ফ্লেক্সবক্স লেআউটগুলি অপ্টিমাইজ করা অপরিহার্য। কর্মক্ষমতা বিবেচনাগুলি বোঝা এবং এই নিবন্ধে আলোচিত অপ্টিমাইজেশন কৌশলগুলি প্রয়োগ করে, আপনি জটিল লেআউট তৈরি করতে পারেন যা দ্রুত লোড হয় এবং বিভিন্ন ব্রাউজার এবং ডিভাইসে মসৃণভাবে চলে। আপনার লেআউটগুলি পুঙ্খানুপুঙ্খভাবে পরীক্ষা করতে এবং যে কোনও কর্মক্ষমতা সমস্যা চিহ্নিত করতে এবং সমাধান করতে উপলব্ধ সরঞ্জাম এবং সংস্থানগুলি ব্যবহার করতে ভুলবেন না। কর্মক্ষমতা-প্রথম মানসিকতা গ্রহণ করে, আপনি নিশ্চিত করতে পারেন যে আপনার ফ্লেক্সবক্স লেআউটগুলি একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করে।

আলোচিত কৌশলগুলি একটি বিশ্বব্যাপী শ্রোতাদের জন্য প্রযোজ্য যারা বিভিন্ন ব্যবহারকারীর ভিত্তির জন্য ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশন তৈরি করে। কর্মক্ষমতা অপ্টিমাইজ করার সময় বিভিন্ন অঞ্চলে বিভিন্ন নেটওয়ার্কের অবস্থা এবং ডিভাইসের ক্ষমতা বিবেচনা করা অত্যন্ত গুরুত্বপূর্ণ। উদাহরণস্বরূপ, ধীর গতির ইন্টারনেট সংযোগযুক্ত অঞ্চলগুলিতে, ছবি অপ্টিমাইজ করা এবং HTTP অনুরোধের সংখ্যা হ্রাস করা আরও গুরুত্বপূর্ণ হয়ে ওঠে।

আরও পড়ার জন্য

• MDN ওয়েব ডক্স: ফ্লেক্সবক্সের মৌলিক ধারণা
• সিএসএস-ট্রিকস: ফ্লেক্সবক্সের একটি সম্পূর্ণ গাইড
• Google ওয়েব ফান্ডামেন্টালস: রেন্ডারিং কর্মক্ষমতা